<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4">
        <!-- grid 表格布局，分为 5 列 间隔4-->
        <div class="grid grid-cols-4 gap-4">
            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1 hidden md:block">
                <div class="sticky -top-96">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>
                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>
                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>

            <!-- 左边栏，占用 3 列 -->
            <div v-loading="contentLoading" element-loading-text="努力加载中..."
                class="col-span-4 md:col-start-2  md:col-span-3 mb-3">
                <!-- 文章列表，grid 表格布局，分为 1 列 -->
                <div class="grid grid-cols-1 gap-3">
                    <div v-for="(article, index) in articles" :key="index"
                        class="col-span-1  animate__animated animate__fadeInUp">

                        <!-- 如果屏幕是手机端则改变样式 -->
                        <div v-if="index % 2 == 0 || isMobile"
                            class="rounded-xl lg:flex lg:items-center bg-white shadow-md dark:bg-gray-900 hover:shadow-lg hover:translate-x-px hover:translate-y-px">
                            <div v-if="article.isTop && !isMobile" class="absolute top-0 right-0 ">
                                <svg-icon name="pattern" class="w-12 h-12 -rotate-90 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>
                            <div v-else-if="article.isTop && isMobile" class="absolute right-0 bottom-3">
                                <svg-icon name="pattern" class="w-12 h-12 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>
                            <!-- 图片 -->
                            <el-image class="object-cover w-full lg:m-3 lg:w-5/12  rounded-xl h-48 lg:h-48 shadow-inner"
                                :src="article.cover" alt="" @click="goArticleDetailPage(article.id)">
                                <template #error>
                                    <div class="flex items-center w-full h-full justify-center"
                                        @click="goArticleDetailPage(article.id)">
                                        <el-icon :size="50"><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>

                            <div class=" lg:mt-4 lg:w-7/12  m-3 grid justify-items-center ">

                                <!-- 标题 -->
                                <a @click=" goArticleDetailPage(article.id)" class="cursor-pointer">
                                    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        {{ article.title }}</h2>
                                </a>
                                <!-- 简介 -->
                                <p class="mt-3 text-sm text-gray-500 md:text-sm max-h-16 dark:text-gray-400 text-ellipsis overflow-hidden"
                                    style="word-wrap: break-word;">
                                    {{ article.summary }}
                                </p>

                                <!-- 文章发布时间、所属分类 -->
                                <p class="flex items-center font-normal text-gray-400 text-sm dark:text-gray-400 mt-2">
                                    <!-- 发布时间 -->
                                    <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                    </svg>
                                    {{ article.createDate }}

                                    <!-- 所属分类 -->
                                    <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 dark:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 18 18">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                                    </svg>
                                    <a @click="goCategoryArticleListPage(article.category.id, article.category.name)"
                                        class="text-gray-400 hover:underline">{{ article.category.name
                                        }}</a>
                                </p>

                                <div class="flex items-center m-2">
                                    <span v-for="(tag, tagIndex) in article.tags" :key="tagIndex"
                                        @click="goTagArticleListPage(tag.id, tag.name)"
                                        class="cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                                        {{ tag.name }}
                                    </span>
                                </div>
                            </div>

                        </div>

                        <div v-else
                            class="rounded-xl lg:flex lg:items-center bg-white shadow-md dark:bg-gray-900 hover:shadow-lg hover:translate-y-px hover:translate-x-px">
                            <div v-if="article.isTop" class="absolute  top-0">
                                <svg-icon name="pattern" class="w-12 h-12 rotate-180 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>

                            <div class="lg:mt-4 lg:w-7/12  m-3 grid justify-items-center ">

                                <!-- 标题 -->
                                <a @click="goArticleDetailPage(article.id)" class="cursor-pointer">
                                    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        {{ article.title }}</h2>
                                </a>
                                <!-- 简介 -->
                                <p class="mt-3 text-sm text-gray-500 md:text-sm max-h-16 dark:text-gray-400 text-ellipsis overflow-hidden"
                                    style="word-wrap: break-word;">
                                    {{ article.summary }}
                                </p>

                                <!-- 文章发布时间、所属分类 -->
                                <p class="flex items-center font-normal text-gray-400 text-sm dark:text-gray-400 mt-2">
                                    <!-- 发布时间 -->
                                    <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                    </svg>
                                    {{ article.createDate }}

                                    <!-- 所属分类 -->
                                    <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 dark:text-white"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 18 18">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                                    </svg>
                                    <a @click="goCategoryArticleListPage(article.category.id, article.category.name)"
                                        class="text-gray-400 hover:underline">{{ article.category.name }}</a>
                                </p>

                                <div class="flex items-center m-2">
                                    <span v-for="(tag, tagIndex) in article.tags" :key="tagIndex"
                                        @click="goTagArticleListPage(tag.id, tag.name)"
                                        class="cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                                        {{ tag.name }}
                                    </span>
                                </div>
                            </div>
                            <!-- 图片 -->
                            <el-image class="object-cover w-full lg:m-3 lg:w-5/12  rounded-xl h-48 lg:h-48 shadow-inner"
                                :src="article.cover" alt="" @click="goArticleDetailPage(article.id)">
                                <template #error>
                                    <div class="flex items-center w-full h-full justify-center"
                                        @click="goArticleDetailPage(article.id)">
                                        <el-icon :size="50"><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>

                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <!-- 上一页 -->
                        <li>
                            <a @click="getArticles(current - 1)"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']">

                                <span class="sr-only">上一页</span>
                                <svg-icon name="f-pre-page" class="w-3 h-3" aria-hidden="true" />
                            </a>
                        </li>
                        <!-- 页码 -->
                        <li v-for="(pageNo, index) in pages" :key="index">
                            <a @click="getArticles(pageNo)"
                                class="flex items-center justify-center px-4 h-10 leading-tight bg-white border border-gray-300 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[pageNo == current ? 'text-blue-600 bg-blue-300 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']">
                                {{ index + 1 }}
                            </a>
                        </li>
                        <!-- 下一页 -->
                        <li>
                            <a @click="getArticles(current + 1)"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current < pages ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">下一页</span>
                                <svg-icon name="f-next-page" class="w-3 h-3" aria-hidden="true" />

                            </a>
                        </li>
                    </ul>
                </nav>
            </div>


            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4  md:hidden block">
                <div class="sticky top-20">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>


                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>


                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>
        </div>

    </main>
    <Footer> </Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
// import { initTooltips } from 'flowbite'
import { onMounted, ref } from 'vue'
import { getArticlePageList } from '@/api/frontend/article'
import { useRouter } from 'vue-router'
import { Picture as IconPicture } from '@element-plus/icons-vue'

// 引入路由
const router = useRouter()
let isMobile = false
// 跳转分类文章列表页
const goCategoryArticleListPage = (id, name) => {
    console.log(id, name)
    // 跳转时通过 query 携带参数（分类 ID、分类名称）
    router.push({ path: '/category/article/list', query: { id, name } })
}

// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
    console.log(id, name)
    // 跳转时通过 query 携带参数（标签 ID、标签名称）
    router.push({ path: '/tag/article/list', query: { id, name } })
}

// 跳转文章详情页
const goArticleDetailPage = (articleId) => {
    router.push('/article/' + articleId)
}

// initialize components based on data attribute selectors
// onMounted(() => {
//     initTooltips();
// })


// 文章集合
const articles = ref([])
// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(10)
// 总文章数
const total = ref(0)
// 总共多少页
const pages = ref(0)

function getArticles(currentNo) {
    // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
    if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return
    // 调用分页接口渲染数据
    getArticlePageList({ current: currentNo, size: size.value }).then((res) => {
        if (res.success) {
            articles.value = res.data
            current.value = res.current
            size.value = res.size
            total.value = res.total
            pages.value = res.pages
            document.documentElement.scrollTop = 0
        }
    }).finally(() => {
        contentLoading.value = false
    })
}


getArticles(current.value)

//绑定element-plus加载组件
const contentLoading = ref(true)


var width = window.innerWidth || document.documentElement.clientWidth;
console.log('屏幕宽度：' + width)
// 在这里根据屏幕尺寸执行相应的操作
if (width < 768) {
    // 屏幕宽度小于 768px 时执行
    console.log('屏幕宽度小于 768px 时执行')
    isMobile = true
}



</script>

<style scoped></style>